<script setup>
import { ref, reactive, watch, computed, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { motion, transform, useAnimate } from 'motion-v'
const { proxy } = getCurrentInstance()
import { thisPinia } from '@/pinia/index';
const pinia = thisPinia();

const Ref_LoginForm = ref(null)
const loginForm = reactive({
    name: '',
    pass: '',
})
const loginRules = reactive({
    name: [{ required: true, message: '没名我咋知道你是谁?', trigger: 'change' }],
    pass: [{ required: true, message: '不输密码我拿啥校验?', trigger: 'change' }],
})

const [counterRef, animate] = useAnimate()
const RemainingToColor = transform([12, 0], ['#000', '#dcdfe6'])

const nameRemaining = computed(() => 12 - (String(loginForm.name).length || 0))
const passRemaining = computed(() => 12 - (String(loginForm.pass).length || 0))

watch(nameRemaining, (newVal) => {
    const nameTransform = transform([0, 20], [60, 0])
    animate(
        counterRef.value,
        { scale: 1 },
        {
            type: 'spring',
            velocity: nameTransform(newVal),
            stiffness: 700,
            damping: 80,
        }
    )
})
watch(passRemaining, (newVal) => {
    const passTransform = transform([0, 20], [60, 0])
    animate(
        counterRef.value,
        { scale: 1 },
        {
            type: 'spring',
            velocity: passTransform(newVal),
            stiffness: 700,
            damping: 80,
        }
    )
})

onMounted(() => {
    window.addEventListener('keydown', _Keydown);
})

onUnmounted(() => {
    window.removeEventListener('keydown', _Keydown);
});

const _Keydown = ({ key }) => {
    if (key == 'Enter') {
        _Login()
    }
}

const _Login = () => {
    const FormEl = Ref_LoginForm.value
    if (!FormEl) return
    FormEl.validate((valid) => {
        if (valid) {
            pinia._token('lsy-nb')
            proxy.$router.replace('/')
        }
    })
}

</script>

<template>
    <div class="login-page">
        <motion.div class="box" :initial="{ opacity: 0, scale: 0.5 }" :animate="{ opacity: 1, scale: 1 }" :transition="{
            duration: 0.8,
            delay: 1,
            ease: [0, 0.71, 0.2, 1.2]
        }">
            <el-form ref="Ref_LoginForm" style="max-width: 600px;" :model="loginForm" :rules="loginRules"
                label-width="auto">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model.number="loginForm.name" maxlength="12" @keyup.enter="_Login()" />
                    <div class="max-length">
                        <motion.span ref="counterRef" :style="{
                            color: RemainingToColor(nameRemaining),
                            willChange: 'transform',
                            display: 'block'
                        }">
                            {{ nameRemaining }}
                        </motion.span>
                    </div>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input v-model="loginForm.pass" maxlength="12" type="password" autocomplete="off"
                        @keyup.enter="_Login(Ref_LoginForm)" />
                    <div class="max-length">
                        <motion.span ref="counterRef" :style="{
                            color: RemainingToColor(passRemaining),
                            willChange: 'transform',
                            display: 'block'
                        }">
                            {{ passRemaining }}
                        </motion.span>
                    </div>
                </el-form-item>
            </el-form>
        </motion.div>
    </div>
</template>

<style scoped lang="scss">
.login-page {
    height: 100vh;

    .box {
        cursor: auto;
        border-radius: 0;
        width: 800px;
        height: 500px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #000;
        box-shadow: inset 0 0 100px 1px rgba(0, 0, 0, 0.5);

        ::v-deep(.el-form-item) {
            margin-bottom: 28px !important;
        }

        ::v-deep(.el-form-item__label) {
            color: #000 !important;
            font-family: 'handsome';
            font-size: 20px;
            font-weight: 800;
        }

        ::v-deep(.el-input__inner) {
            color: #000 !important;
        }

        ::v-deep(.el-input__wrapper) {
            background-color: transparent !important;
            padding-right: 26px !important;
        }

        ::v-deep(.el-input__wrapper.is-focus) {
            box-shadow: inset 0 0 0px 1px #000;
        }
    }

    .box::before,
    .box::after,
    .box {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .box::before,
    .box::after {
        content: "";
        z-index: -1;
        margin: -20px;
        box-shadow: inset 0 0 0px 1px #000;
        animation: clipMe 16s linear infinite;
    }

    .box::before {
        animation-delay: -8s;
    }

    @keyframes clipMe {

        0%,
        100% {
            clip: rect(0px, 840px, 2px, 0px);
        }

        25% {
            clip: rect(0px, 2px, 540px, 0px);
        }

        50% {
            clip: rect(538px, 840px, 540px, 0px);
        }

        75% {
            clip: rect(0px, 840px, 540px, 838px);
        }
    }

    .inp {
        position: relative;
        font-size: 18px;
        line-height: 1;
        background-color: #0b1011;
        color: #f5f5f5;
        // border: 2px solid #1d2628;
        border-radius: 0px;
        padding: 10px;
        padding-right: 70px;
        width: 300px;
    }

    .max-length {
        position: absolute;
        right: 10px;
        top: 1px;
        font-family: 'cute';
    }
}
</style>
